<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用子组件 -->
        <!-- 父组件监听子组件传递的自定义事件,执行函数的形参就是数据 -->
        <part @myevent="getdatafromsonFn" :id="100"></part>


    </div>
</body>

</html>
<script>
    // 子传父:
    // 子传父: 子组件通过事件, 将子组件的数据传递给父组件使用, 
    // 总结:  子组件通过在子组件中定义事件, 然后在事件处理函数中 通过 this.$emit('')方法
    // 将自定义事件和函数传递给父组件, 然后父组件早当前事件子组件的组件标签上监听自定义事件, 
    // 该自定义事件的处理函数的形参就是接收的子组件传递的数据

    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                count: 0
            }
        },
        methods: {
            getdatafromsonFn(data) {
                console.log('得到子传父的数据', data);
            }
        },
        components: {
            part: {
                template: `<div>
                                <p>子组件: {{userobj.name}}--{{userobj.age}}</p>
                                <p><button @click='sontofatherFn'>子传父</button></p>
                           </div>`,
                data() {
                    return {
                        userobj: {
                            name: '付豪',
                            age: 30
                        }
                    }
                },
                emits: ['myevent'], //子传父 声明要定义的自定义的事件(可选)
                props: ['id'], //父传子 接收父组件传递的属性
                methods: {
                    sontofatherFn() {
                        //console.log('子传父');
                        console.log(this);
                        // 将子组件的数据传递给父组件
                        //语法: this.$emit('自定义事件',要传递的数据)
                        this.$emit('myevent', this.userobj)
                    }
                }
            },

        }


    });

    //挂载根实例到根节点
    vm.mount('#app')

</script>